<template>
	<div>
		<el-form ref="form" :model="form" label-width="100px">
		  <el-form-item label="账号" >
		    <el-input v-model="form.userAccount" style="width: 200px;" disabled></el-input>
		  </el-form-item>
		  <el-form-item label="上次登录时间">
		    <el-input v-model="form.userLastlogin" style="width: 200px;" disabled></el-input>
		  </el-form-item>
		  <el-form-item label="昵称">
		    <el-input v-model="form.userNickname" style="width: 200px;" ></el-input>
		  </el-form-item>
		  <el-form-item label="绑定年级">
			  <template>
			    <el-select v-model="form.userGrade" placeholder="请选择" clearable>
			      <el-option
			        v-for="item in options1"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			      </el-option>
			    </el-select>
			  </template>
		  </el-form-item>
		  <el-form-item label="绑定邮箱">
			  <el-input v-model="form.userPhone" style="width: 200px;" clearable></el-input>
		  </el-form-item>
		  <el-form-item label="区域位置">
			  <template>
			    <el-select v-model="form.areaId" placeholder="请选择" clearable>
			      <el-option
			        v-for="item in options"
			        :key="item.value"
			        :label="item.label"
			        :value="item.value">
			      </el-option>
			    </el-select>
			  </template>
		  </el-form-item>
		  <el-form-item label="个人介绍">
		    <el-input v-model="form.userContext" type="textarea"></el-input>
		  </el-form-item>
		  <el-form-item label="上传头像">
		    <el-upload
		      class="avatar-uploader"
			  action= "http://localhost:81/file/upload"
			  name = "mf"
			  :on-remove = "handleRemove"
		      :show-file-list="true"
		      :on-success="handleAvatarSuccess"
		      :before-upload="beforeAvatarUpload">
		      <img v-if="imageUrl" :src="imageUrl" class="avatar">
		      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		    </el-upload>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit">立即修改</el-button>
		    <el-button>取消</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
	  name: 'AccountManage',
	  data(){
		  return{
			  imageUrl:'',
			  delOss: {
				  delFileName:""
			  },
			  form: {
					userAccount:"",
					userNickname:"",
					userPhone:"",
					areaId:"",
					userGrade:"",
					userImage:"",
					userLastlogin:"",
					userContext:"",
					areaValue:""
			    },
			options: [{
					  value: '1',
					  label: '教学区'
					}, {
					  value: '2',
					  label: '宿舍区'
					}, {
					  value: '3',
					  label: '生活区'
					}, {
					  value: '4',
					  label: '体育区'
				}],
			options1: [{
					  value: '1',
					  label: '2018级'
					}, {
					  value: '2',
					  label: '2019级'
					}, {
					  value: '3',
					  label: '2020级'
					}, {
					  value: '4',
					  label: '2021级'
				}]
		  }
	  },
	  methods: {
	  	onSubmit() {
	  	        this.$http.post("/user/updateUser",this.form).then(resp=>{
					if(resp.data.code == 20000){
						this.$message({
							  message: resp.data.message,
							  type: 'success'
							});
							localStorage.removeItem("adminRoot")
							localStorage.setItem("adminRoot",JSON.stringify(resp.data.data));
							location.reload();
							console.log(localStorage.getItem("adminRoot"));
						} else {
							this.$message.error(resp.data.message);
						}
	  	         });
	  	      },
		  //文件上传
		handleAvatarSuccess(res, file) {
				  this.form.userImage = res.data;
				  this.delOss.delFileName = res.data.substring(res.data.lastIndexOf('m')+2);
				  this.imageUrl = URL.createObjectURL(file.raw);
			},
		beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/png';
			  const isLt2M = file.size / 1024 / 1024 < 2;
				  
			  if (!isJPG) {
				this.$message.error('上传头像图片只能是 png 格式!');
			  }
			  if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
		handleRemove(file, fileList) {
			 this.$http.post("/file/delete",this.delOss).then(resp=>{
				console.log(resp);
				if(resp.data.code == 20000){
					this.$message({
						  message: resp.data.message,
						  type: 'success'
						});
						this.imageUrl=""
					} else {
						this.$message.error(resp.data.message);
					}
			  });
			},
		formOne(){
			let adminRoot = localStorage.getItem("adminRoot");
			let JQueryele=JSON.parse(adminRoot);
			console.log(JQueryele)
			this.form.userNickname = JQueryele.userNickname;
			this.form.userLastlogin = JQueryele.userLastlogin;
			this.form.userAccount = JQueryele.userAccount;
			this.form.userPhone = JQueryele.userPhone;
			this.form.areaId = JQueryele.areaId+"";
			this.form.userGrade = JQueryele.userGrade;
			this.form.userContext = JQueryele.userContext;
			console.log(this.form)
			},
		},
	  created() {
		  this.formOne();
	  },
	}
</script>

<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
		/* margin-top: 30px; */
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
</style>
